<!-- 邻里生活 -->
<template>
	<view class="CurrentLives">
		<view class="lives dis-cen">
			<view class="dis-ali" @click="onJumpPage('residential')">
				<view class="lives-title box font-weight-600 color3 size-28">{{villageData.communityName}}</view>
				<text class="iconfont icon-a-lujing4332biankuang color3 size-22"></text>
			</view>
			<button class="share dis-ali" open-type="share">
				<text class="iconfont icon-fenxiang color3 size-32"></text>
				<view class="font-weight-400 color3 size-28">分享</view>
			</button>
		</view>
		<view class="current f-background">
			<Singleproduct v-for="(item,index) in 10" :key="index" :loading="loading" :border="index" />
		</view>
		<!-- 底部操作 -->
		<view class="operation f5-background pof">
			<view class="operation-height dis-cen f-background">
				<view class="oper por" :class="{'amplify':cartsBool}">
					<!-- <image class="width-height100" src="@/static/icons/gwc.png" mode=""></image> -->
					<view class="oper-num poa background dis radius100">
						<text class="font-weight-600 color-f size-30">9</text>
					</view>
				</view>
				<view class="ation dis-ali">
					<view class="ation-price">
						<view class="font-weight-600 size-28 color">
							<text class="price-font">¥</text>
							<text class="size-44">{{onPriceCut('5',0)}}</text>
							<text class="size-40">.</text>
							<text class="size-36">{{onPriceCut('5.98',1)}}</text>
						</view>
						<view class="dis-ali">
							<text class="font-weight-400 size-28">配送费100豆</text>
							<text class="iconfont icon-xia size-20"></text>
						</view>
					</view>
					<u-button type="primary" :customStyle="{width: '344rpx',height: '120rpx',borderRadius: 0,margin: 0}"
						:color="settings.color" @click="onJumpPage">
						<text class="color-f font-weight-400 size-36">去支付</text>
					</u-button>
				</view>
			</view>
			<view class="inset-bottom"></view>
		</view>
		<view class="inset-bottom"></view>
	</view>
</template>

<script>
	const url = {
		residential: '/packagePerson/address/residential?type=1', // 选择小区
	}
	import { onPriceCut } from '@/utils/index';
	import Singleproduct from "@/components/single-product/single-product"
	import { appId, settings } from "@/utils/public"
	export default {
		components: { Singleproduct },
		data() {
			return {
				cartsBool: false,
				settings,
				loading: true,
				villageData: {}, // 选中的小区信息
			}
		},
		onLoad(options) {
			console.log('options', options)
			if (options.id) uni.setStorageSync('village', options);
		},
		onShow() {
			this.villageData = uni.getStorageSync('village')
			let _this = this
			setTimeout(() => {
				_this.loading = false
			}, 1000)
		},
		onShareAppMessage(res) {
			let villageData = this.villageData
			return {
				title: '代取快递丨买商品丨免费跑腿', //
				path: `/packageReplace/current-lives/current-lives?id=${villageData.id}&communityName=${villageData.communityName}`, //
				imageUrl: '../../static/img/fx.png',
				mpId: appId, //此处配置微信小程序的AppId
			};
		},
		methods: {
			onPriceCut,
			onJumpPage(name, parName, par) {
				let urlData = url[name]
				if (par) urlData = `${urlData}?${parName}=${par}` // 有参数
				uni.navigateTo({
					url: urlData
				});
			},
		}
	}
</script>

<style lang="scss">
	.CurrentLives {
		padding: 0 16rpx 136rpx;

		.current {
			border-radius: 20rpx;
		}

		.lives {
			height: 74rpx;
			padding: 0 16rpx 0 24rpx;

			.icon-a-lujing4332biankuang {
				transform: rotate(90deg);
				margin-left: 10rpx;
			}

			.lives-title {
				max-width: 304rpx;
			}

			.share {
				margin: 0;
				padding: 0;
				background: rgba(0, 0, 0, 0);
			}

			.share::after {
				border: 0;
			}

			.icon-fenxiang {
				transform: rotate(90deg);
				margin-right: 8rpx;
			}
		}

		.operation {
			z-index: 100;
			left: 0;
			bottom: 0;
			width: 100%;

			.operation-height {
				height: 120rpx;
				padding-left: 36rpx;

				.oper {
					width: 46rpx;
					height: 46rpx;
					transform: scale(1);
					transition: transform 0.5s ease;

					.oper-num {
						min-width: 38rpx;
						min-height: 38rpx;
						right: -20rpx;
						top: -14rpx;
						box-sizing: border-box;
						padding: 0 10rpx;
					}
				}

				.amplify {
					transform: scale(1.5);
				}
			}

			.ation-price {
				margin-right: 28rpx;
				color: #555;

				.font-weight-600 {
					text-align: right;
				}
			}
		}
	}
</style>